<template>
	<view class="evaluate_container">
		<view class="fx fx_nw jcb aic fz_12 mt_12">
			<view class="fx aic">
				<image class="width_32 height_32 br50 mr_8" :src="getStaticUrl(data.customerHeadUrl)"
					mode="aspectFit"></image>
				<view>
					<view class="width_100 fe">
						{{data.customerName||''}}
					</view>
					<view class="fc_999">
						{{data.createTime||''}}
					</view>
				</view>
			</view>
			<u-rate :value="data.scoreLevel" :count="5" activeColor="#D70000" size="26rpx"></u-rate>
		</view>
		<view class="fc_999 mt_8">
			{{productRuleStr(data.attrValue)}}
		</view>
		<view class="mt_8">
			{{data.evaluateContent||'该用户暂未评价！'}}
		</view>
		<view class="mt_12 fx fx_w imgs_wrap">
			<view class="pr" v-for="item1,index1 in evaluateImageList()" :key="index">
				<CusImage width="196rpx" height="196rpx" radius="16rpx" :src="item1"
					@click.native="handlePreview(index1)" />
				<view class="pa bc_bt pa b_8 r_8 fc_fff lh_18 fz_12 pl_4 pr_4"
					v-if="index1 == evaluateImageList().length-1">
					共{{index1+1}}张
				</view>
			</view>
		</view>
		<view class="mt_16 pt_6 pb_6 pl_12 pr_12 bc_ reply br_4" v-if="data.replyContent">
			<text class="fc_r">店小二：</text>
			<text>{{data.replyContent||''}}</text>
		</view>
	</view>
</template>

<script>
	import CusImage from '@/components/Image'
	import {
		getStaticUrl
	} from '@/utils/index.js'
	export default {
		components: {
			CusImage
		},
		props: {
			data: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {

			}
		},
		computed: {
			evaluateImageList() {
				return () => this.data.evaluateImageUrl ? this.data.evaluateImageUrl.split(',') : []
			},
			getStaticUrl() {
				return (src) => getStaticUrl(src)
			},
			productRuleStr() {
				return data => {
					return data ? JSON.parse(data).map(item1 => item1.value).join(' ') : ''
				}
			}
		},
		methods: {
			handlePreview(current) {
				uni.previewImage({
					urls: this.evaluateImageList(),
					current,
					indicator: 'number'
				})
			}
		}
	}
</script>

<style lang="scss">
	/deep/.u-rate__content__item__icon-wrap {
		.u-icon>text {
			padding: 0 2rpx !important;
		}
	}

	.imgs_wrap {
		grid-row-gap: 18rpx;
		grid-column-gap: 18rpx;
	}

	.reply {
		background: #f8f8f8;
	}
</style>